<template>
  <PublicPage :showHead="false">
    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/my_bg.png" class="bodyBgImg" />
    <scroll-view class="myPage" scroll-y @scroll="onScroll">
      <!-- 头像+本周数据 -->
      <view class="topBgBox" :style="'padding-top:' + (globalData.navHeight + 28) + 'px;'">
        <view class="topBox">
          <view class="tips" v-if="isLogin && !myTipsHide">
            <text>可以修改你的账号头像和名称</text>
            <view class="arrow_down"></view>
          </view>

          <view class="u-flex headBox">
            <view class="u-flex" @click="navigateTo({url: '/pagesB/personalCenter/homePage'})">
              <view class="headImg" :style="isLogin?'border: 1px solid #FFFFFF;':''">
                <image v-if="isLogin" :src="userInfo.communityLogo" style="width:96rpx;height:96rpx;" mode="aspectFill" />
                <image v-else src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar2_icon.png" style="width:96rpx;height:96rpx;" mode="aspectFill" />
              </view>
              <view class="fz-16 u-p-l-24 u-flex communityName_box" style="color: #FFF;">
                <text>{{isLogin?userInfo.communityName:'未登录'}}</text>
              </view>
            </view>
            <view class="fz-14 u-p-l-24 u-flex homepage_box" @click="navigateTo({url: '/pagesB/personalCenter/homePage'})">
              <text>主页</text>
              <icon class="iconfont icon-arrow_right fz-12 linh-30" />
            </view>
          </view>

          <view class="topCard bgf">
            <view class="u-flex">
              <view class="flex1 tc u-p-t-32 u-p-b-32" @click.stop="navigateTo({url: '/pagesA/wallet/wallet'})">
                <view class="grBox2">
                  <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/wallet.png" mode="widthFix" style="width:100%;height:auto;" />
                </view>
                <view class="fz-12 u-p-t-12">￥{{myPageInfo.balance || 0}}</view>
              </view>
              <view class="flex1 tc" @click.stop="navigateTo({url: '/pagesA/meFocus/fans'})">
                <view class="grBox2">
                  <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/fans.png" mode="widthFix" style="width:100%;height:auto;" />
                  <u-badge type="error" v-if="myPageInfo.fansUnreadCount>0" :count="myPageInfo.fansUnreadCount" :offset="[-10,-10]"></u-badge>
                </view>
                <view class="fz-12 u-p-t-12">成员</view>
              </view>
              <view class="flex1 tc" @click.stop="navigateTo({url: '/pagesA/meFocus/meFocus'})">
                <view class="grBox2">
                  <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/follow.png" mode="widthFix" style="width:100%;height:auto;" />
                </view>
                <view class="fz-12 u-p-t-12">关注</view>
              </view>
              <view class="flex1 tc" @click.stop="navigateTo({url: '/pagesB/message/index'})">
                <view class="grBox2">
                  <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/news.png" mode="widthFix" style="width:100%;height:auto;" />
                  <u-badge type="error" v-if="unreadcount>0" :count="unreadcount" :offset="[-10,-10]"></u-badge>
                </view>
                <view class="fz-12 u-p-t-12">消息</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 今日收入 -->
      <view class="bgf profit_box fz-14">
        <view class="income_box u-flex">
          <view>
            <view class="fz-14 fw6">今日收入</view>
            <view class="u-m-t-12 fz-18 fw6">{{myPageInfo.todayIncome || 0}}</view>
          </view>
          <view  @click.stop="navigateTo({url: '/pagesB/canHelpSell/index'})">
            <button class="red_btn" hover-class="hover">去赚钱</button>
          </view>
        </view>
        <view class="u-flex justify-between u-m-t-42">
          <view class="other_msg_box tc">
            <view class="fz-12 viceColor">累计收入</view>
            <view class="mun_box1 linh-20 fw6 u-p-t-12">{{playvolumeFn(myPageInfo.totalInBalance) || 0}}</view>
          </view>
          <view class="tc">
            <view class="fz-12 viceColor">累计成交额</view>
            <view class="mun_box2 linh-20 fw6 u-p-t-12">{{playvolumeFn(myPageInfo.saleAmount) || 0}}</view>
          </view>
          <view class="tc">
            <view class="fz-12 viceColor">访客数</view>
            <view class="mun_box3 linh-20 fw6 u-p-t-12">{{playvolumeFn(myPageInfo.browseCount) || 0}}</view>
          </view>
        </view>
      </view>

      <!-- 活动广告 -->
      <view v-if="isLogin && cardInfo.periods">
        <Advertise :info="cardInfo" />
      </view>

      <!-- 其他功能 -->
      <view class="bgf u-m-t-24 pos1">
        <view class="u-flex justify-between u-p-t-20 px32">
          <view>{{moduleType==1?'买':'卖'}}家功能</view>
          <view class="switch_module_box" @click="switchModuleFn">
            <i class="iconfont icon-qiehuan fz-12" />
            切换{{moduleType==1?'卖':'买'}}家功能
            <view class="redDot" v-if="moduleType==1&&(myPageInfo.deliverOrderCount>0||myPageInfo.sellerAfterSalesCount>0||myPageInfo.goodsSquareCount>0||myPageInfo.canHelpSellCount>0)"></view>
          </view>
        </view>
        <!-- 买家 -->
        <view class="u-flex" v-if="moduleType==1">
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pages/order/index?type=0'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/main_order.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32">买入订单</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pages/order/index?type=0&childType=4'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/frame3.png" mode="widthFix" style="width:100%;height:auto;" />
              <view class="redDot" v-if="myPageInfo.userAfterSalesCount>0"></view>
            </view>
            <view class="tc u-p-t-12 u-p-b-32">售后/退款</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/addressLibrary/index'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/address.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32">收货地址</view>
          </view>
          <view class="flex1 fz-12">
          </view>
        </view>
        <!-- 卖家 -->
        <view class="u-flex" v-if="moduleType==2">
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pages/order/index?type=1&childType=1'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/main_order.png" mode="widthFix" style="width:100%;height:auto;" />
              <u-badge type="error"  v-if="myPageInfo.deliverOrderCount>0" :count="myPageInfo.deliverOrderCount" :offset="[-10,-10]"></u-badge>
            </view>
            <view class="tc u-p-t-12 u-p-b-32">待发货</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pages/order/index?type=1&childType=3'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/frame3.png" mode="widthFix" style="width:100%;height:auto;" />
              <u-badge type="error"  v-if="myPageInfo.sellerAfterSalesCount>0" :count="myPageInfo.sellerAfterSalesCount" :offset="[-10,-10]"></u-badge>
            </view>
            <view class="tc u-p-t-12 u-p-b-32">待售后</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/goods/shopWindow'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/small_shop.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32">我的小店</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesA/libraryGoods/libraryGoods'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/warehouse.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32">商品管理</view>
          </view>
        </view>
        <view class="u-flex" v-if="moduleType==2">
          <!-- <view class="flex1 fz-12" @click.stop="dlInvite=true">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/invate.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32">邀请好友</view>
          </view> -->
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/selectionCenter/index'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/myGr4.png" mode="widthFix" style="width:100%;height:auto;" />
              <view class="redDot" v-if="myPageInfo.goodsSquareCount>0"></view>
            </view>
            <view class="tc u-p-t-12 u-p-b-32 ">选品中心</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/canHelpSell/index'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/canHelpSell.png" mode="widthFix" style="width:100%;height:auto;" />
              <view class="redDot" v-if="myPageInfo.canHelpSellCount>0"></view>
            </view>
            <view class="tc u-p-t-12 u-p-b-32 ">可帮卖的</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/pullNew/index'})">
            <view class="grBox3">
              <image class="icon_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/pull _new_icon.gif" mode="widthFix" style="width:68rpx;height:68rpx;" />
            </view>
            <view class="tc u-p-b-32 ">绑新赚钱</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesA/release/drafts'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/caogaoxiang.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32 ">草稿编辑</view>
          </view>
        </view>
        <view class="u-flex" v-if="moduleType==2">
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/freightTemplate/selectTemplate'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/freightTemplate_icon.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32 ">运费模板</view>
          </view>
          <view class="flex1 fz-12" @click.stop="navigateTo({url: '/pagesB/mySetting/index'})">
            <view class="grBox2">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/Frame.png" mode="widthFix" style="width:100%;height:auto;" />
            </view>
            <view class="tc u-p-t-12 u-p-b-32 ">系统设置</view>
          </view>
          <view class="flex1 fz-12">
          </view>
          <view class="flex1 fz-12">
          </view>
        </view>
      </view>
      <!-- 关注公众号 -->
      <view class="follow_box_z" v-if="userInfo.isSubscribe==0"></view>
      <view class="follow_box u-flex justify-between" v-if="userInfo.isSubscribe==0">
        <view>点击关注服务号，立享四大特权！</view>
        <button class="red_btn" hover-class="hover" @click.stop="_goAttention">去关注</button>
      </view>
    </scroll-view>
    <!-- 邀请好友 -->
    <!--    <u-popup-->
    <!--        v-model="dlInvite"-->
    <!--        mode="bottom"-->
    <!--        border-radius="24"-->
    <!--        closeable-->
    <!--        safe-area-inset-bottom-->
    <!--        @maskClick="dlInvite=false"-->
    <!--    >-->
    <!--      <view class="posterContent">-->
    <!--        <view class="popupHeader">邀请好友</view>-->
    <!--        <swiper-->
    <!--            :current="posterCurrent"-->
    <!--            :duration="500"-->
    <!--            next-margin="260rpx"-->
    <!--            class="mySwiper"-->
    <!--            @change="_changePoster"-->
    <!--        >-->
    <!--          <swiper-item-->
    <!--              v-for="(item,index) in posters"-->
    <!--              :key="index"-->
    <!--              :class="{-->
    <!--                'u-p-l-48':index !=0,-->
    <!--                'u-p-l-72':index==0,-->
    <!--                activeSwiper:index===posterCurrent-->
    <!--              }"-->
    <!--          >-->
    <!--            <view class="imageWrap">-->
    <!--              <image :src="item.url" mode="aspectFit" class="image_content" />-->
    <!--            </view>-->
    <!--          </swiper-item>-->
    <!--        </swiper>-->
    <!--        <view class="groupImage">-->
    <!--          <view-->
    <!--              v-for="(item,index) in posters"-->
    <!--              :key="index"-->
    <!--              class="imageView"-->
    <!--              :class="{activeSwiper:index===posterCurrent}"-->
    <!--              @click.stop="_handlePoster(index)"-->
    <!--          >-->
    <!--            <image :src="item.url" mode="aspectFit" class="imageItem" />-->
    <!--          </view>-->
    <!--        </view>-->
    <!--        <view class="footer_btn">-->
    <!--          <button open-type="share" id="sharewx" class="btn">-->
    <!--            <i class="iconfont icon-weixin1" />-->
    <!--            <text>邀请微信好友</text>-->
    <!--          </button>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </u-popup>-->
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import Advertise from "./advertise.vue";
import mini from "@/api/mini.js";
import Util from "@/api/util.js";
// import { posters } from './posters'
export default {
  components: {
    PublicPage,
    Advertise
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
    userInfo () {
      return this.$store.state.userInfo
    },
    // 其他红点未读数
    myPageInfo(){
      return this.$store.state.myPageInfo
    },
    // 未读消息数
    unreadcount () {
      return this.$store.state.unreadcount
    },
    // 海报数组
    // posters() {
    //   return posters
    // }
  },
  data(){
    return {
      show: true,
      myTipsHide: true, // 是否隐藏提示
      // dlInvite: false, // 邀请好友弹窗变量
      // posterCurrent: 0, // 邀请好友海报激活状态index
      moduleType: 2, // 1是买家2卖家默认是买家功能
      dlAttendOfficial: false,
      cardInfo: {} // 奖金卡片
    }
  },
  // onShareAppMessage(res) {
  //   const shareData = {
  //     title: this.posters[this.posterCurrent].name,
  //     imageUrl: this.posters[this.posterCurrent].url,
  //     path: `/pagesB/squeezePage/index?shareType=true&type=${this.posterCurrent}`
  //   }
  //   if (this.userInfo.communityName && this.posterCurrent) {
  //     shareData.title = `${this.userInfo.communityName}${this.posters[this.posterCurrent].name}`
  //   }
  //   console.log(JSON.parse(JSON.stringify(shareData)), "分享参数打印")
  //   return shareData
  // },
  onLoad(){
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#ffffff",
      animation: {
        duration: 400,
        timingFunc: "easeIn",
      },
    });
    if (uni.getStorageSync('moduleType')) this.moduleType = uni.getStorageSync('moduleType')
  },
  onShow(){
    // 获取用户信息--检测用户是否已经关注公众号
    this.getInfoFn()
    
    if(this.isLogin){ // 首次进入
      this.myTipsHide = !!uni.getStorageSync('myTipsHide')

      // 获取红点规则
      mini.getMyPageInfo().then(res=>{
        this.$store.commit('SET_MY_PAGEINFO',res.data)
      })
      mini.getCardInfo().then(res=>{
        this.cardInfo = res.data
      })
    }
  },
  onHide(){
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#000000",
      animation: {
        duration: 400,
        timingFunc: "easeIn",
      },
    });

    if(this.isLogin && !uni.getStorageSync('myTipsHide')){ // 首次离开
      uni.setStorageSync('myTipsHide', true)
    }
  },
  methods:{
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
    // 跳转webview
    _goAttention() {
      this.setIsRefreshType(true)
      this.navigateTo({url: '/pagesA/components/WebView'})
    },
    switchModuleFn () { // 切换买卖家模板功能
      this.moduleType=this.moduleType==1?2:1
      uni.setStorageSync('moduleType',this.moduleType)
    },
    onScroll(){
      if(this.isLogin){ // 首次滚动
        this.myTipsHide = true
      }
    },
    // swiper切换时触发
    // _changePoster(e) {
    //   this.posterCurrent = e.detail.current
    // },
    // 点击海报缩略图触发
    // _handlePoster(current) {
    //   this.posterCurrent = current
    // }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>